/**
 * @author deep1nBlur
 * @email mailbrcee@gmail.com
 * @create date 2020-10-23 08:25:59
 * @modify date 2020-10-23 08:25:59
 * @desc [表格组件]
 */
<template>
  <div>
    <vxe-table
      ref="xTable"
      border
      stripe
      height="600"
      highlight-current-row
      highlight-hover-row
      show-header-overflow
      show-overflow
      align="center"
      :data="tableData"
      :edit-rules="validRules"
      show-footer
      :edit-config="{trigger: 'click', mode: 'cell'}">
      <template v-slot:empty>
        <p> </p>
      </template>
      
      <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
      <vxe-table-column field="feeType" title="费用类型" width="200" :edit-render="{name: '$select',optionProps: {'value': 'code', 'label': 'name'}, options: feeTypeData}"/>
      <vxe-table-column field="billingUnit" title="计费单位" width="200" :edit-render="{name: '$select',optionProps: {'value': 'code', 'label': 'name'}, options: billingItemData}"/>
      <vxe-table-column field="unitPrice" title="单价" :edit-render="{name: 'input'}" width="200" ></vxe-table-column>
      <vxe-table-column field="inboundUse" title="入库显示" width="130" :edit-render="{name: '$select',optionProps: {'value': 'code', 'label': 'name'}, options: isShowData}" ></vxe-table-column>
      <vxe-table-column field="outboundUse" title="出库显示" width="130" :edit-render="{name: '$select',optionProps: {'value': 'code', 'label': 'name'}, options: isShowData}" ></vxe-table-column>
      <vxe-table-column field="remarks" title="备注" :edit-render="{name: 'input'}" width="350" ></vxe-table-column>
      <vxe-table-column title="操作"   width="100">

        <template v-slot:default="{ row, rowIndex }">
          <vxe-button type="text" @click="insertEvent(rowIndex)" >
            <i class="el-icon-plus" />
          </vxe-button>
          <vxe-button type="text" @click="delRowEvent(row,rowIndex)" v-if="row.isShow"> 
            <i class="el-icon-minus" />
          </vxe-button>
        </template>
      </vxe-table-column>
      <!-- <vxe-table-column title="操作"  fixed="right" min-width="100"  v-if="type = 'view'">

      </vxe-table-column>
 -->
    </vxe-table>

  </div>    
</template>
<script>
import Vue from "vue";
import "xe-utils";
import VXETable from "vxe-table";
import "vxe-table/lib/index.css";
import 'vxe-table-plugin-element/dist/style.css'

import VXETablePluginElement from 'vxe-table-plugin-element'
import XEUtils from "xe-utils";
import VXEUtils from "vxe-utils";
Vue.use(VXETable, VXEUtils, XEUtils, { mounts: ["cookie"] });
VXETable.use(VXETablePluginElement)
import { contractOperationCostAdd ,contractOperationCostDetail,getWmsFeeType,contractDetail} from '@/api/basicInfo'

export default {
  props: ["type", "ifEdit",'shipmentCode','index'],
  // computed: {
  //   ifDisable() {
  //     // 查看 表单全部禁用
  //     return this.type !== "view";
  //   },
  // },

  data: () => ({
    tableProps: {
      allAlign: "center",
      columnConfig: {
        minWidth: "150px",
      },
    },
    contractOperationCostList:[],
    billingItemData:[
      { code: "PIECE", name: "件" },
      { code: "TON",name: "吨" },
    ],
    isShowData:[
      { code: "0", name: "否" },
      { code: "1",name: "是" },
    ],
    feeTypeData:[],
    tableData:[{
      inboundUse:'1',
      outboundUse:'1'
    }],
      validRules: {
        feeType: [
          { required: true, message: '费用类型必须选择' },
        ],
        billingUnit: [
          { required: true, message: '计费单位必须选择' },
        ],
        unitPrice: [
          { required: true, message: '单价必须填写' },
          { pattern: /^\d{0,14}(\.\d{0,6})?$/, message: '单价需为正小数点前限制14位小数点后限制6位' },
          // { max: 14, message: '单价不能超过14位'}
        ],
        remarks:[
          { max: 100, message: '单价不能超过100位'}
        ]
      },
    amountProps: {
      toPay: null,
      due: null,
    },
  }),
  created() {
    this.getWmsFeeType()
  },


  methods: {
    // 获取页面信息
    getInfo() {
      let code = this.$route.query.code ? this.$route.query.code : "";
      if(this.type == 'view' || this.type == 'edit'){
        if(this.index == 'purchase'){
          contractDetail(code).then(response => {
            this.form = response.data,
            this.tableData = this.form.contractOperationCostList
            this.tableData.forEach( (i,index) => {
              if(index !== 0){
                i.isShow = true
              }
            })
            if(!response.data.contractOperationCostList[0].feeType){
              console.log(1111)
              this.tableData = [{
                inboundUse:'0',
                outboundUse:'0'
              }]
            }
          })
        }
        if(this.index == 'sale'){
          saleDetail(code).then(response => {
          })
        }
      }
    },

    //费用类型查询
    getWmsFeeType(){
      getWmsFeeType().then(response => {
        this.feeTypeData = response.data[0].dictList
        this.getInfo();
      })
    },

    // 提交
    funcSubmit() {
      const rLoading = this.openLoading();
      let contractOperationCostList = this.$refs.xTable.tableData

      contractOperationCostAdd(contractOperationCostList).then((response) => {
        rLoading.close();
        this.$message({ message: response.msg, type: "success" });
      });

    },

    activeCellMethod({ row, column }) {
      if (this.type == "view") {
        return false
      }else{
        return true
      }
    },
    insertEvent(rowIndex) {
      const record = {
        inboundUse:'1',
        outboundUse:'1',
        isShow:'true'
        
      }
      this.tableData.splice(rowIndex + 1, 0, record)
    },
    delRowEvent(row, rowIndex) {
      this.$confirm('确认刪除吗？')
        .then(_ => {
          this.tableData.splice(rowIndex, 1)
        })
        .catch(_ => {})
    },

  },
};
</script>
<style lang="scss" scoped>
  .dialog-footer {
    margin: 80px auto;
    width: 175px;
    // float: right;
  }
  </style>

<style>
.vxe-table .vxe-body--column:not(.col--ellipsis), .vxe-table .vxe-footer--column:not(.col--ellipsis), .vxe-table .vxe-header--column:not(.col--ellipsis) {
 padding: 6px 0;
}
.vxe-toolbar{padding:0 0 10px 0}
</style>
